<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>
  <div id="app">
    <!-- v-if="变量名/表达式" -->
    <img :src="staffPhoto" v-imgerror="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"/>
    <!-- <img :src="staffPhoto" v-imgerror="'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"/> -->
  </div>
</body>
<script>
  //自定义指令
  //用途:用来操作dom
  //特征:自己定义,v-开头自定义属性
  //语法:
  //注意事项:
    //忘记怎么办,查看文档:https://v2.cn.vuejs.org/v2/guide/custom-directive.html
  Vue.directive('imgerror',{
    inserted(el, options){
      console.log('inserted',el.src)
      if(!el.src){
        el.src = options.value
      }
      el.onerror = function(){
        el.src = options.value
      }
    },
    update(el, options){
      // console.log('update',el.src)
      if(!el.src){
        el.src = options.value
      }
    }
  })
  new Vue({
    el: '#app',
    data() {
      return {
        // staffPhoto:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        staffPhoto: undefined//'https://localhost:8080/undefined.jpeg',
      }
    },
    created() {
      setTimeout(()=>{
        //情况1,返回一个失效的图片路径
        // this.staffPhoto = 'https://localhost:8080/undefined.jpeg'
        //情况2,返回空字符串
        // this.staffPhoto = ''
        // 情况3,返回undefined,null
        this.staffPhoto = undefined
        // this.staffPhoto = null
      },100)
    },
  })
</script>
</html>
